<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>进度条</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			body{
				margin: 10px 0;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="progress">
				<!--
					aria-valuemin 当前进度条的默认属性初始化
				-->
				<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
					<span class="sr-only">60%</span>
				</div>
			</div>
			<!--
				带有提示框的进度条
			-->
			<div class="progress">
				<div class="progress progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
					80%
				</div>
			</div>
			<!--
				progress-bar-success 可设置颜色
			-->
			<div class="progress">
				<div class="progress-bar progress-bar-success" role="progressbar" ria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					40%
				</div>
			</div>
			<!--
				progress-bar-striped 带斑马线 纹理 其他的颜色也带纹理 
				active 动画效果
			-->
			<div class="progress">
				<div class="progress-bar progress-bar-striped" role="progressbar" ria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					40%
				</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" ria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					40%
				</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" ria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					40%
				</div>
			</div>
			<!--
				堆叠的效果
			-->
			<div class="progress">
				<div class="progress-bar" style="width: 30%;">
					<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 30%;"></div>
				</div>
			</div>
		</div>
	</body>
</html>
